<template>
  <div id="app" class="flex">
    <!-- 侧边栏菜单 -->
    <el-menu :default-active="activeIndex" mode="vertical" @select="handleSelect" class="w-64 bg-gray-100">
      <!-- API 操作组 -->
      <el-submenu index="api-group">
        <template #title>
          <i class="el-icon-menu"></i>
          <span>API 操作</span>
        </template>
        <el-menu-item index="1">API 配置管理</el-menu-item>
        <el-menu-item index="2">鉴权 配置管理</el-menu-item>
        <el-menu-item index="3">执行 API 查询</el-menu-item>
      </el-submenu>
      <!-- 数据库操作组 -->
      <el-submenu index="db-group">
        <template #title>
          <i class="el-icon-menu"></i>
          <span>数据库操作</span>
        </template>
        <el-menu-item index="4">数据库连接配置管理</el-menu-item>
        <el-menu-item index="5">Query 配置管理</el-menu-item>
        <el-menu-item index="6">执行 SQL 查询</el-menu-item>
      </el-submenu>
    </el-menu>
    <!-- 内容区域 -->
    <div class="content flex-1 p-8">
      <ApiConfigList v-if="activeIndex === '1'" />
      <AuthConfigList v-if="activeIndex === '2'" />
      <ApiCallPage v-if="activeIndex === '3'"  />
      <DbConnectionConfigList v-if="activeIndex === '4'" />
      <QueryConfigList v-if="activeIndex === '5'" />
      <QueryCallPage v-if="activeIndex === '6'" />
    </div>
  </div>
</template>

<script>
import ApiConfigList from './components/api/ApiConfigList.vue';
import ApiCallPage from './components/api/ApiCallPage.vue';
import DbConnectionConfigList from './components/db/DbConnectionConfigList.vue';
import AuthConfigList from './components/auth/AuthConfigList.vue';
import QueryConfigList from "@/components/query/QueryConfigList.vue";
import QueryCallPage from '@/components/query/QueryCallPage.vue';

export default {
  components: {
    ApiConfigList,
    ApiCallPage,
    DbConnectionConfigList,
    AuthConfigList,
    QueryConfigList,
    QueryCallPage
  },
  data() {
    const savedIndex = localStorage.getItem('activeIndex');
    return {
      activeIndex: savedIndex || '1',
    };
  },
  async mounted() {
  },
  methods: {
    handleSelect(index) {
      this.activeIndex = index;
      localStorage.setItem('activeIndex', index);
    }
  }
};
</script>

<style scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  display: flex;
}

.content {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.el-menu {
  margin-bottom: 20px;
}
</style>